<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      .box {
         display: flex;
         flex-direction: column;
         width: 1200px;
         height: 800px;
         background-color: green;
         margin: 0 auto;
      }
      .box1 {
         flex: 1;
         background-color: #eee;
         margin-bottom: 10px;
      }

      .box2 {
         flex: 9;
         display: flex;
      }
      .box3{
         flex: 3;
         background-color: yellow;
         margin-right: 10px;
      }
      .box4{
         flex: 7;
         display: flex;
         flex-direction: column;
      }
      .box5{
         flex:1;
         background-color: greenyellow;
         margin-bottom: 10px;
      }
      .box6{
         flex: 9;
         background-color: #ff0000;
      }
   </style>
</head>

<body>
   <div class="box">
      <div class="box1">
      </div>
      <div class="box2">
         <div class="box3"></div>
         <div class="box4">
            <div class="box5"></div>
            <div class="box6"></div>
         </div>
      </div>
   </div>
</body>

</html>